iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0

昨天看完無序列表,今天我們來認識有序列表~

有序列表(<ol>)

有序列表用來顯示需要排序的項目,如步驟、流程或排行。默認情況下,項目前面會顯示數字。

常用屬性

  • type : 定義列表項的標號格式(數字、字母等)。
  • start : 指定列表的起始編號。
  • reversed : 反轉列表順序。
<ol>
  <li>第一步:打開電腦</li>
  <li>第二步:開啟瀏覽器</li>
  <li>第三步:開始編寫HTML</li>
</ol>

https://ithelp.ithome.com.tw/upload/images/20240915/20168630BR3zyMX0UD.png

改變列表標號
使用type屬性將列表標號改成字母

<ol type="A">
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>

https://ithelp.ithome.com.tw/upload/images/20240915/20168630SRQnEEGdLD.png

反向排序
透過reversed屬性讓列表從高到低排列

<ol reversed>
  <li>第三步:開始編寫 HTML</li>
  <li>第二步:開啟瀏覽器</li>
  <li>第一步:打開電腦</li>
</ol>

https://ithelp.ithome.com.tw/upload/images/20240915/20168630BDABsA9GnC.png

今天先介紹到這裡,謝謝觀看!/images/emoticon/emoticon41.gif


上一篇
探險日記 DAY 5
下一篇
探險日記 DAY 7
系列文
30天前端之旅:探索web開發的探險日記19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言